import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Layout, Menu, Breadcrumb } from 'antd';
import {Link, Route, Redirect}  from "react-router-dom";
import Tom from '../user/tom'
import { routesList } from '../router/config'
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };

  render() {
    const { collapsed, routes } = this.state;
    console.log(this.props);
    
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">     
                {
                  routesList.map((item,index) => {
                  return <SubMenu key={index} title={item.title} icon={<UserOutlined />}>
                      {item.contetnList.map((item,index) => {
                          return  <Menu.Item key={item.id}><Link to={item.path}>{item.name}</Link></Menu.Item>
                      })}
                  </SubMenu>  
                  })
                }
          </Menu>
        </Sider>
        {routesList.map((item,index) => {
            return item.contetnList.map((item,index) => {
                console.log(item);
                
                return  <Route path={item.path} component={item.component}  key={index}></Route>
            })
           
        })}
        <Redirect from='/' to='/user/tom' exact></Redirect>
      </Layout>
    );
  }
}

export default SiderDemo;